<template>
  <div class="Home">
    <!-- 头部 -->
    <div class="group">
      <ul>
        <li>
          <button @click="closeAll" ref="closeBtn">锁定</button>
        </li>
        <li>
          所在城市:
          <select v-model="addUserInfo.city" :disabled="isAllClose">
            <option value="请选择城市">请选择城市</option>
            <option :value="item.name" v-for="item in cityData" :key="item.id">{{item.name}}</option>
          </select>
        </li>
        <li>用户名: <input type="text" v-model="addUserInfo.username" :disabled="isAllClose"></li>
        <li>年龄: <input type="number" v-model="addUserInfo.age" :disabled="isAllClose"></li>
        <li><button @click="sendUserInfo" :disabled="isAllClose">提交</button></li>
      </ul>
    </div>
    <div class="content">
      <div class="search">
        <input type="search" v-model="keywords" placeholder="请输入关键字，地区/姓名">
        <button @click="searchInfo">搜索</button><br />
        <span>请输入年龄区间筛选</span><br />
        <input type="number" v-model.number="minNum"> <span>~</span>
        <input type="number" v-model.number="maxNum">
        <button @click="handleSearchAge">筛选</button>
        <button @click="handleReset">重置</button>
      </div>
      <!-- 内容 -->
      <table border="1" cellspacing="0" cellpadding="0" width="100%">
        <thead>
          <tr>
            <th width="50px"></th>
            <th>id</th>
            <th>姓名</th>
            <th>
              <span>年龄</span>
              <button @click="ageSort">升序</button>
            </th>
            <th>
              <span>城市</span>
              <button @click="citySort">升序</button>
            </th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody align="center">
          <tr v-for="item in userList" :key="item.id">
            <td>
              <input type="checkbox" v-model="item.check" :disabled="isAllClose">
            </td>
            <td>
              {{item.id}}
            </td>
            <td>
              {{item.username}}
            </td>
            <td>
              {{item.age}}
            </td>
            <td>{{item.city}}</td>
            <td>
              <button @click="ediaRowData(item.id)" :disabled="isAllClose">修改</button>
              <button @click="delRowData(item.id)" :disabled="isAllClose">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
      <!-- 删除按钮 -->
      <div>
        <button :disabled="isAllClose" @click="delChoseItem">删除所选</button>
      </div>
    </div>
  </div>
</template>

<script>
import city from "@/assets/data.json";
export default {
  name: "Home",
  data() {
    return {
      // 城市信息
      cityData: city.data,
      // 用户信息
      addUserInfo: {
        username: "",
        age: "",
        city: "请选择城市",
        id: "",
        check: false,
      },
      //   用户列表
      userList: [],
      //   是否正在修改
      isEdia: true,
      //   解锁禁用按钮
      isAllClose: false,
      num: 1,
      keywords: "",
      minNum: "",
      maxNum: "",
      temArr: [],
    };
  },
  computed: {},
  methods: {
    //    添加或者修改按钮
    sendUserInfo() {
      // if (
      //   this.addUserInfo.username === "" ||
      //   this.addUserInfo.age === "" ||
      //   this.addUserInfo.city === ""
      // ) {
      //   return alert("不能为空");
      // } else if (this.addUserInfo.city === "请选择城市") {
      //   return alert("请选择城市");
      // }
      if (this.isEdia) {
        this.addUserInfo.id = this.num;
        this.userList.push(this.addUserInfo);
        this.addUserInfo = {
          username: "",
          age: "",
          city: "",
          id: "",
          check: false,
        };
        this.num++;
      } else {
        let _index = this.userList.findIndex(
          (v) => v.id === this.addUserInfo.id
        );
        this.$set(this.userList, _index, this.addUserInfo);
        this.addUserInfo = {
          username: "",
          age: "",
          city: "",
          id: "",
          check: false,
        };
      }
    },
    //  根据id删除某项
    delRowData(id) {
      this.userList.forEach((item, index) => {
        if (item.id === id) {
          this.userList.splice(index, 1);
        }
      });
    },
    // 修改某项
    ediaRowData(id) {
      let temArr = this.userList.find((v) => v.id === id);
      this.addUserInfo.username = temArr.username;
      this.addUserInfo.age = temArr.age;
      this.addUserInfo.id = temArr.id;
      this.addUserInfo.city = temArr.city;
      this.isEdia = false;
    },
    // 关闭所有按钮/禁用所有按钮
    closeAll() {
      if (!this.isAllClose) {
        this.isAllClose = true;
        this.$refs.closeBtn.innerHTML = "解锁";
      } else {
        let time = 3;
        this.$refs.closeBtn.innerHTML = `${time}秒后解锁`;
        let timer = setInterval(() => {
          time -= 1;
          this.$refs.closeBtn.innerHTML = `${time}秒后解锁`;
          if (time <= 0) {
            clearInterval(timer);
            this.$refs.closeBtn.innerHTML = `锁定`;
            this.isAllClose = false;
          }
        }, 1000);
      }
    },
    // 选中删除
    delChoseItem() {
      for (let i = this.userList.length - 1; i >= 0; i--) {
        if (this.userList[i].check) {
          this.userList.splice(i, 1);
        }
      }
    },
    // 根据关键字搜索
    searchInfo() {
      if (this.keywords.trim().length === 0) return;
      this.temArr = JSON.parse(JSON.stringify(this.userList));
      this.userList = this.userList.filter(
        (v) =>
          v.username.includes(this.keywords) || v.city.includes(this.keywords)
      );
    },
    // 按照年龄区间筛选
    handleSearchAge() {
      this.temArr = JSON.parse(JSON.stringify(this.userList));
      this.userList = this.userList.filter(
        (v) => v.age >= this.minNum && v.age <= this.maxNum
      );
    },
    // 重置搜索
    handleReset() {
      this.userList = this.userList.sort((a, b) => a.id - b.id);
    },
    // 年龄排序
    ageSort(e) {
      if (e.target.innerHTML == "升序") {
        this.userList = this.userList.sort((a, b) => a.age - b.age);
        e.target.innerHTML = "降序";
      } else {
        this.userList = this.userList.sort((a, b) => b.age - a.age);
        e.target.innerHTML = "升序";
      }
    },
    // 城市排序
    citySort(e) {
      if (e.target.innerHTML == "升序") {
        this.userList = this.userList.sort((a, b) =>
          a.city.localeCompare(b.city)
        );
        e.target.innerHTML = "降序";
      } else {
        this.userList = this.userList.sort((a, b) =>
          b.city.localeCompare(a.city)
        );
        e.target.innerHTML = "升序";
      }
    },
  },
};
</script>

<style>
thead tr {
  background-color: rgba(204, 204, 204, 0.246);
}
tbody tr:nth-child(odd) {
  background-color: rgba(138, 135, 135, 0.377);
}
</style>